<template>
    <draggable-resizable :w="500" :h="600" class="resizable" :draggable="draggable" :resizable="false" :y="90" :x="850">
        <div class="person">
            <div class="person_header">
            </div>
            <div class="person_content">
                <el-row :gutter="10">
                    <el-col :span="8" v-for="(item, index) in  person " :key="index">
                        <div class="person_item" @click="tabPserson(item)">
                            <span :class="['person-attr', item.name == isPerson && 'active']">
                                <i :class="['iconfont', item.avr]"></i>
                            </span>
                            <span class="person-name">{{ item.zh_name }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="setting">
                <p>语速 {{ rate }}x</p>
                <el-slider v-model="rate" :min="0.1" :max="2" :step="0.1" :format-tooltip="formatTooltip"
                    @mouseleave="mouseleave" :marks="marks" @mousedown="silderDown">
                </el-slider>
            </div>
            <div class="setting">
                <p>语调 {{ voMark[volume] }}</p>
                <el-slider v-model="volume" @mouseleave="mouseleave" @mousedown="silderDown" :min="0" :max="20" :step="1"
                    :marks="voMark">
                </el-slider>
            </div>
        </div>
    </draggable-resizable>
</template>

<script>
import DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default {
    data() {
        return {
            person: [
                {
                    name: 'zh-CN-YunxiNeural',
                    avr: 'audio19',
                    zh_name: '云熙'
                },
                {
                    name: 'zh-CN-XiaoxiaoNeural',
                    avr: 'audio38',
                    zh_name: '晓晓'
                },
                {
                    name: 'zh-CN-XiaoyiNeural',
                    avr: 'audio39',
                    zh_name: '晓希'
                },
                {
                    name: 'zh-CN-YunjianNeural',
                    avr: 'audio12',
                    zh_name: '云建'
                },
                {
                    name: 'zh-CN-YunxiaNeural',
                    avr: 'audio36',
                    zh_name: '云霞'
                },
                {
                    name: 'zh-CN-YunyangNeural',
                    avr: 'audio14',
                    zh_name: '云杨'
                },
                {
                    name: 'zh-CN-liaoning-XiaobeiNeural',
                    avr: 'audio35',
                    zh_name: '东北晓贝'
                },
                {
                    name: 'zh-CN-shaanxi-XiaoniNeural',
                    avr: 'audio40',
                    zh_name: '西北晓妮'
                }
            ],
            draggable: true,
            marks: {
                0.1: '0.1',
                0.2: '0.2',
                0.3: '0.3',
                0.4: '0.4',
                0.5: '0.5',
                0.6: '0.6',
                0.7: '0.7',
                0.8: '0.8',
                0.9: '0.9',
                1: '1',
                1.1: '1.1',
                1.2: '1.2',
                1.3: '1.3',
                1.4: '1.4',
                1.5: '1.5',
                1.6: '1.6',
                1.7: '1.7',
                1.8: '1.8',
                1.9: '1.9',
                2: '2',
            },
            voMark: {
                0: '-10',
                1: '-9',
                2: '-8',
                3: '-7',
                4: '-6',
                5: '-5',
                6: '-4',
                7: '-3',
                8: '-2',
                9: '-1',
                10: '0',
                11: '1',
                12: '2',
                13: '3',
                14: '4',
                15: '5',
                16: '6',
                17: '7',
                18: '8',
                19: '9',
                20: '10',
            }
        }
    },
    computed: {
        isPlay() {
            return this.$store.getters.isPlay
        },
        rate: {
            get: function () {
                return this.$store.getters.rate
            },
            set: function (val) {
                this.$store.dispatch('audio/setRate', val)
            }

        },
        volume: {
            get: function () {
                return this.$store.getters.volume
            },
            set: function (val) {
                this.$store.dispatch('audio/setVolume', val)
            }

        },
        isPerson: {
            get: function () {
                return this.$store.getters.person.name
            },
            set: function (val) {
                return val
            }
        }
    },
    components: {
        DraggableResizable
    },
    methods: {
        silderDown() {
            this.draggable = false
        },
        mouseleave() {
            this.draggable = true
        },
        formatTooltip(value) {
            return `${value}x`;
        },
        tabPserson(per) {
            if (!this.isPlay) {
                this.isPerson = per.name
                console.log();
                this.$parent.audio = null
                this.$parent.progress = 0
                this.$nextTick(() => {
                    this.$parent.duration = 0
                })

                this.$parent.starTime = 0
                this.$store.dispatch('audio/setPerson', per)
            } else {
                this.$message({
                    message: `${this.$store.getters.person.zh_name}还在播放！！`,
                    type: 'warning',
                })
            }
        }
    }
}
</script>

<style lang="less">
.person {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: rgb(34, 84, 161);

    .person_header {
        width: 100%;
        height: 10px;
    }

    .person_content {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;

        .person_item {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            cursor: pointer;

            .person-attr {
                width: 60px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;

                i {
                    font-size: 43px;
                }

                background-color: rgba(6, 124, 167, .4);
                border-radius: 50%;

            }

            .active {
                border: 2px solid #ffc900;

            }

            .person-name {
                color: hsla(0, 0%, 100%, .6);
                font-size: 14px;
                margin-top: 10px;
            }
        }
    }

    .setting {
        width: 100%;
        padding: 5px 20px;
        margin: 0;
        box-sizing: border-box;
        color: #fff;


        .el-slider__marks-text {
            font-size: 12px;
            color: rgb(147, 174, 211);

        }

        .el-slider__button {
            width: 12px;
            height: 12px;
            margin-bottom: 3px;
        }

        .el-slider__bar {
            background-color: transparent;
        }

        .el-slider__runway {
            height: 3px;
        }

        .el-slider__marks-stop {
            top: -1.5px !important;
        }
    }
}

.resizable {
    z-index: 99;
}

.vdr-container.active {
    border: 0;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    margin-bottom: 15px;
}

.grid-content {
    border-radius: 4px;
}
</style>



